<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="init">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- 用户列表 -->
    <el-table :data="tableData" highlight-current-row v-loading="listLoading" style="width: 100%;">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="name" label="角色">
      </el-table-column>
      <el-table-column prop="info" label="说明">
      </el-table-column>
      <el-table-column prop="memberNum" label="成员数">
      </el-table-column>
      <el-table-column inline-template label="状态">
        <span>
          <el-switch v-model=row.type @change="editStatus(row)" on-text="启用" off-text="停用" on-color="#13ce66" off-color="#ff4949">
          </el-switch>
        </span>
      </el-table-column>
      <el-table-column inline-template :context="_self" label="操作">
        <span>
          <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDel(row.rId)">删除</el-button>
        </span>
      </el-table-column>
    </el-table>
    <!--编辑界面-->
    <el-dialog :title="editFormTtile" v-model="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
        <el-form-item label="角色" prop="name">
          <el-input auto-complete="off" v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="info">
          <el-input auto-complete="off" v-model="editForm.info"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop='privileges'>
          <el-select v-model="editForm.privileges" multiple placeholder="请选择" size="large">
            <el-option-group v-for="group in projectPrivileges" :key="group.id" :label="group.projectname">
              <el-option v-for="item in group.privilege" :key="item.id" :label="item.name" :value="item.priId">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">{{btnEditText}}</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import util from 'common/js/util'
import NProgress from 'nprogress'
import * as RoleAction from './RoleAction'

export default {

  data() {
      return {
        formInline: {
          keyword: ''
        },
        value: true,
        editFormVisible: false, //编辑界面显是否显示
        editFormTtile: '编辑', //编辑界面标题
        //编辑界面数据
        editForm: {
          rId: '',
          name: '',
          info: '',
          privileges: []
        },
        editLoading: false,
        btnEditText: '提 交',
        editFormRules: {
          name: [{
            required: true,
            message: '请填写权限',
            trigger: 'blur'
          }, ],
          info: [{
            required: true,
            message: '请填写说明',
            trigger: 'blur'
          }, ],
          privileges: [{
            required: true,
            message: '请选择权限',
            trigger: 'change',
            type: 'array'
          }, ],
        },
        tableData: [],
        listLoading: false,
        projects: [],
        addAuthorityForm: {
          projects: []
        },
        //各个项目及对应的权限
        projectPrivileges: [],
      }
    }, created: function() {
      this.init()
    },
    methods: {
      //状态显示转换  :formatter="formatType" 加上这个可以处理程序 转换
      formatType: function(row, column) {
        return row.type == 1 ? true : row.type == 0 ? false : true;
      },
      //删除记录
      handleDel: function(rId) {
        //console.log(row);
        var _this = this;
        this.$confirm('确认删除该记录吗?', '提示', {
          //type: 'warning'
        }).then(() => {
          _this.listLoading = true;
          NProgress.start();
          RoleAction.delRole(rId).then(function(response) {
            _this.listLoading = false;
            NProgress.done();
            if (response.ret == 200) {
              _this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
              _this.init()
            } else {
              _this.$message.error(response.msg);
            }
          })
        }).catch(() => {

        });
      },
      //显示编辑界面
      handleEdit: function(row) {
        if (this.$refs["editForm"]) {
          this.resetForm("editForm")
        }
        this.editFormVisible = true;
        this.editFormTtile = '编辑权限'
        this.editForm.name = row.name
        this.editForm.info = row.info
        this.editForm.rId = row.rId

        var privileges = new Array()
        for (var i in row.permission) {
          privileges.push(row.permission[i].priId)
        }
        this.editForm.privileges = privileges
      },
      //编辑 or 新增
      editSubmit: function(formName) {
        var _this = this
        _this.$refs[formName].validate((valid) => {
          if (valid) {

            _this.$confirm('确认提交吗？', '提示', {}).then(() => {
              _this.editLoading = true;
              NProgress.start();
              _this.btnEditText = '提交中';
              var params = _this.editForm
              if (params.rId) {
                //修改
                var rs = RoleAction.updateRole(params.rId, params.name, params.info, JSON.stringify(params.privileges))
                rs.then(function(response) {
                  _this.btnEditText = '提 交';
                  _this.editLoading = false;
                  NProgress.done();
                  if (response.ret == '200') {
                    _this.$notify({
                      title: '成功',
                      message: '修改成功',
                      type: 'success'
                    });
                    _this.editFormVisible = false;
                    _this.init()
                  } else {
                    _this.$message.error(response.msg);
                  }
                  _this.listLoading = false;
                })
              } else {
                //增加
                var rs = RoleAction.setRole(params.name, params.info, JSON.stringify(params.privileges))
                rs.then(function(response) {
                  _this.btnEditText = '提 交';
                  _this.editLoading = false;
                  NProgress.done();
                  if (response.ret == '200') {
                    _this.$notify({
                      title: '成功',
                      message: '增加成功',
                      type: 'success'
                    });
                    _this.editFormVisible = false;
                    _this.init()
                  } else {
                    _this.$message.error(response.msg);
                  }
                  _this.listLoading = false;
                })
              }
            });
          } else {
            alert('请填写必填项')
            return false;
          }
        })
      },
      //显示新增界面
      handleAdd: function() {
        if (this.$refs["editForm"]) {
          this.resetForm("editForm")
          this.editForm.name = ''
          this.editForm.info = ''
          this.editForm.privileges = []
        }
        this.editFormVisible = true
        this.editFormTtile = '新增角色'
      },
      getApis() {
        var _this = this;
        var pId = _this.editForm.pId;
        //        var rs = RoleAction.GetApisByPId(pId)
        //        rs.then(function(response){
        //          _this.apis = response.data
        //        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      init() {
        var _this = this
        var keyword = _this.formInline.keyword
        var rs = RoleAction.getRoleList(keyword)
        rs.then(function(response) {
          if (response.ret == 200) {
            response.data.forEach(function(val, index, arr) {
              // 对返回的状态进行过滤
              if (val.type == 1) {
                val.type = true
              } else {
                val.type = false
              }
            })
            _this.tableData = response.data
          }
        })

        var projects = RoleAction.getSimplePrivilegeList()
        projects.then(function(response) {
          _this.projectPrivileges = response.data
        })

      },
      editStatus(row) {
        var _this = this
        _this.listLoading = true;
        var type = row.type ? 1 : 0;
        var rs = RoleAction.editStatus(row.rId, type);
        rs.then(function(response) {
          if (response.ret == 200) {
            var typeDescribe = row.type == true ? "启用成功" : "停用成功";
            _this.$notify({
              title: '成功',
              message: typeDescribe,
              type: 'success',
              duration: 1000
            });
          } else {
            _this.$notify({
              title: '异常',
              message: response.msg,
              type: 'error',
            });
            row.type = !row.type
          }
          _this.listLoading = false;
        })
      },
    }
}
</script>
<style scoped>
@import "Role.css";
</style>
